// 全局注册公共组件
const importFn = import.meta.globEager('./*.vue')
export default {
    install(app) {
        for (const path in importFn) {
            const componentName = importFn[path].default.name
                ? importFn[path].default.name
                : importFn[path].default.__name // 获取组件默认名称
            app.component(componentName, importFn[path].default)
        }
        // 定义指令
        defineDirective(app)
    },
}
// 定义图片懒加载指令
const defineDirective = app => {
    // 图片懒加载指令
    // 原理：先存储图片地址不能在src上，当图片进入可视区，将存储的图片地址设置给图片元素即可
    app.directive('lazy', {
        // vue2 监听使用指令的DOM是否创建好，钩子函数：inserted
        // vue3 的指令拥有的钩子函数和组件的一样，使用指令的DOM是否创建好，钩子函数：mounted
        mounted(el, binding) {
            // 创建一个观察对象 用来观察使用当前元素的指令
            const observe = new IntersectionObserver(
                ([{ isIntersecting }]) => {
                    // 进入可视区
                    if (isIntersecting) {
                        // 停止观察
                        observe.unobserve(el)
                        // 把指令的值设置给el的src属性 binding.value就是指令的值
                        // 处理图片加载失败 error 图片加载失败 load 图片加载成功
                        el.onerror = () => {
                            // 加载失败设置默认图片
                            el.src = defaultImg
                        }
                        el.src = binding.value
                    }
                },
                {
                    threshold: 0.01,
                }
            )
            // 开启观察
            observe.observe(el)
        },
    })
}
